<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目管理</title>
    <link rel="icon" href="images/favicon.svg">
    <script src="//unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.13/lib/index.js"></script>
    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
    <link href="//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="stylesheets/project.css">
    <link rel="stylesheet" href="stylesheets/common.css">
</head>
<body>
<div id="app" class="hor-layout app-container">
    <el-card>
        <div class="hor-layout">
            <div class="ver-layout">
                <div class="hor-layout-center" style="margin-bottom: 10px">
                    <span style="color: #333333">1.选择模式：</span>
                    <el-radio-group v-model="selModelRadioValue" size="mini">
                        <el-radio size="mini" label="single">单选模式</el-radio>
                        <el-radio size="mini" label="multiple">多选模式</el-radio>
                    </el-radio-group>
                </div>
                <div class="hor-layout-center" style="margin-bottom: 10px">
                    <span style="color: #777777">2.展现形式：</span>
                    <el-radio-group v-model="showModelRadioValue" size="mini" @input="radioChange">
                        <el-radio size="mini" label="line">单列模式</el-radio>
                        <el-radio size="mini" label="tree">树形模式</el-radio>
                    </el-radio-group>
                </div>
                <div class="hor-layout-center" style="margin-bottom: 10px">
                    <span style="color: #777777">3.项目标签：</span>
                    <el-cascader
                            clearable
                            filterable
                            size="small"
                            v-model="selProjectFlagList"
                            :options="projectFlagTreeList"
                            :props="{ expandTrigger: 'hover',checkStrictly: true }"
                            @change="projectFlagChange"></el-cascader>
                </div>
                <el-input
                        clearable
                        size="small"
                        placeholder="输入关键字进行过滤"
                        v-model="filterText">
                </el-input>
                <div v-if="showModelRadioValue==='line'" class="filter-tree1 ver-layout">
                    <el-tag v-for="(item,index) in filterProjectList" :key="item.id"
                            class="project-list-item"
                            :type="item.selected?'primary':'info'"
                            @click="selectProjectItem(item)">
                        {{item.label}}
                    </el-tag>
                </div>
                <el-tree
                        v-else
                        class="filter-tree"
                        show-checkbox
                        default-expand-all
                        highlight-current
                        check-on-click-node
                        check-strictly
                        node-key="id"
                        :data="treeData"
                        :props="defaultProps"
                        :filter-node-method="filterNode"
                        @check-change="handleCheckChange"
                        ref="tree2">
                </el-tree>
            </div>
            <div class="project-action-layout ver-layout-center">
                <div class="hor-layout-center" style="margin-bottom: 10px">
                    <div>选择的项目：</div>
                    <el-button :disabled="!canClearSelectUse" type="danger" size="mini" @click="clearSelectNode">
                        清空选择
                    </el-button>
                </div>
                <div class="flex-grid-layout">
                    <el-tag v-for="(item,index) in checkNodeList" :key="item.id"
                            @close="handleClose(item)" closable
                            size="small" class="select-project-item">
                        {{item.label}}
                    </el-tag>
                </div>
                <el-button type="primary" size="small" :disabled="!canClearSelectUse" @click="openProject"
                           class="project-action-view">打开项目
                </el-button>
                <el-button type="primary" size="small" :disabled="!canClearSelectUse" @click="openFileDir"
                           class="project-action-view">打开文件夹
                </el-button>
                <el-button type="warning" size="small" @click="showCustomCmd" class="project-action-view">自定义命令
                </el-button>
                <div id="customCmdInputLayout" class="ver-layout-center" style="display: flex;width: 100%">
                    <el-input id="customCmdInputDiv" type="textarea" v-model="customCmdText" :autosize="{ minRows: 8}"
                              class="custom-cmd-input-view"></el-input>
                    <el-radio-group v-model="cmdRadioValue" size="mini" @input="cmdRadioChange"
                                    class="cmd-radio-layout flex-grid-layout">
                        <el-radio size="mini" label="git">git命令</el-radio>
                        <el-radio size="mini" label="build_upload_dev">编译部署开发环境</el-radio>
                        <el-radio size="mini" label="build_upload_test">编译部署测试环境</el-radio>
                    </el-radio-group>
                    <el-button :disabled="!canRunCustomCmdUse" type="primary" size="small" @click="runCustomCmd"
                               class="project-action-view">执行自定义命令
                    </el-button>
                </div>
            </div>
        </div>
    </el-card>
    <el-card class="log-layout">
        <div id="codeLayout" class="code-layout">
            <code>
                <pre id="sseResView"></pre>
            </code>
        </div>
        <el-button type="danger" size="small" @click="clearLog">清空日志</el-button>
    </el-card>
</div>
<!-- js代码 -->
<script type="module" src="javascripts/project_vue.js"></script>
</body>
</html>
